<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{
			position: absolute;
			top: 0px;
			left: 0px;
		}
		body{
			background: #000 url(./bg.jpg) 0 0 no-repeat;
			overflow: hidden;
			background-size:cover;
		}
	</style>
	<script>
		
		window.onload= function(){

			snowList = [];


			function addSnow(num){

				for (var i = 0; i < num; i++) {
					var snow = document.createElement("img");

					snow.src = "./snow.png";

					size = Math.floor(Math.random()*10+5);

					snow.style.width = size+"px";

					snow.style.height = size+"px";

					snow.style.top = Math.floor(Math.random()*600+5)+"px";

					snow.style.left = Math.floor(Math.random()*1024+5)+"px";

					snowList.push(snow);

					document.getElementsByTagName('body')[0].appendChild(snow)

				}

			}
			addSnow(100);


			function run(){

				for (var i = 0; i < snowList.length; i++) {

					var t = parseInt(snowList[i].style.top)

					console.log(snowList[i])

					if(t>600){
						t = 0;
					}else{
						t+=1;
					}

					snowList[i].style.top = t+"px";
				}
			}

			setInterval(run,2);


		}

	</script>
</head>
<body>
	
</body>
</html>